<%--
  Created by IntelliJ IDEA.
  User: HUAWEI
  Date: 2025/1/4
  Time: 20:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<html>
<head>
    <!-- 1.引入css样式文件 -->
    <!-- 1-1.引入 Bootstrap Core CSS -->
    <link href="${pageContext.request.contextPath}/static/css/bootstrap.min.css"
          rel="stylesheet" />
    <!-- 2.引入js文件 -->
    <!-- 2-1.引入 jQuery -->
    <script src="${pageContext.request.contextPath}/static/js/jquery-1.11.3.min.js"></script>
    <!-- 2-1.引入Bootstrap Core JavaScript -->
    <script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js"></script>
</head>
<body>
<jsp:include page="user_navigation.jsp" />
<div class="panel panel-default">
    <div class="panel-body">
        <form class="form-inline" method="get"
              action="${pageContext.request.contextPath }/listAppoint.action">
            <button type="submit" class="btn btn-primary">查询</button>
        </form>
    </div>
</div>
<div class="row">
    <div class="col-lg-12">
        <div class="panel panel-default">
            <div class="panel-heading">预约信息列表</div>
            <table class="table table-bordered table-striped">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>教练姓名</th>
                    <th>项目类型</th>
                    <th>预约时间</th>
                </tr>
                </thead>
                <tbody>
                <c:forEach items="${appointList}" var="row">
                    <tr>
                        <td>${row.id}</td>
                        <td>${row.username}</td>
                        <td>${row.projecot}</td>
                        <td>${row.time}</td>

                        <td><a href="#" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#editAppointDialog" onclick="editDevices(${row.id})">修改</a>
                            <a href="#" class="btn btn-danger btn-xs" onclick="deleteAppoint(${row.id})">删除</a>
                        </td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
            <ul class="pagination">
                <%--pageInfo.pages：代表总页数。如果 pageInfo.pages 大于1，表示存在分页，所以才会显示分页控件。--%>
                <c:if test="${pageInfo.pages > 1}">
                    <%--判断当前页是否大于1，如果当前页是第一页，"上一页"链接应该被禁用或隐藏，不应显示。
                    pageInfo.pageNum：代表当前页的页码（当前显示的是第几页）。例如，如果当前页是第3页，则 pageInfo.pageNum = 3。                      --%>
                    <c:if test="${pageInfo.pageNum > 1}">
                        <li><a href="listAppoint.action?pageNum=${pageInfo.pageNum - 1}&pageSize=${pageInfo.pageSize}">上一页</a></li>
                    </c:if>
                    <%--生成从第1页到总页数 pageInfo.pages 的所有页码链接。--%>
                    <c:forEach var="i" begin="1" end="${pageInfo.pages}">
                        <%--根据当前页码 pageInfo.pageNum，判断当前页的页码是否和循环中的 i 相等。如果相等，添加 active 类，以突出显示当前页的页码。
                        --%>
                        <li class="${pageInfo.pageNum == i ? 'active' : ''}">
                            <a href="listAppoint.action?pageNum=${i}&pageSize=${pageInfo.pageSize}">${i}</a>
                        </li>
                    </c:forEach>

                    <c:if test="${pageInfo.pageNum < pageInfo.pages}">
                        <li><a href="listAppoint.action?pageNum=${pageInfo.pageNum + 1}&pageSize=${pageInfo.pageSize}">下一页</a></li>
                    </c:if>
                </c:if>
            </ul>
        </div>
    </div>
</div>
<jsp:include page="../foot.jsp" />
<div class="modal fade" id="editAppointDialog" tabindex="-1" role="dialog"
     aria-labelledby="editModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="editModalLabel">
                    <!-- 在"modal-title"下设置模态框的标题 -->
                    修改预约时间
                </h4>
            </div>
            <div class="modal-body">
                <!-- 在"modal-body"下设置模态框的内容，一般在这里添加form表单 -->
                <div class="panel-body">
                    <form>
                        <input type="hidden" id="edit_id" name="id" />
                        <div class="input-group ">
                            <span class="input-group-addon">预约时间</span> <input type="datetime-local"
                                                                               class="form-control" name="time" id="edit_time">
                        </div>
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <!-- 在"modal-footer"下设置模态框的提交按钮 -->
                <button type="button" class="btn btn-primary"
                        onclick="updateAppoint()">修改预约时间</button>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    //通过用户id，向服务器发送ajax请求，从服务器端的数据库中，查询出待修改的用户信息。
    function editAppoint(id) {

        // 1. 调用$.ajax()方法，向服务器发送异步http请求
        $.ajax({
            //1) 指定待发送http请求的URL地址。
            url: "${pageContext.request.contextPath}/findAppointById.action",
            //2) 设置http请求的类型，为GET。
            type: "get",
            //3) 将cache设置为false将不会从浏览器缓存中加载请求信息。
            cache:false,
            //4) 设置要发送到服务器的数据。本例中是一个简单格式的JSON数据。
            data: {"id":id},
            //5) 发送http请求，服务器成功响应后，在客户端将要调用的回调方法。
            // 本例中，服务器将返回一个描述用户信息的JSON字符串，在这里，javascript会
            // 将(从服务器接收到的)JSON字符串，自动转换成javascript中的user对象。
            success: function(data) {
                $("#edit_time").val(data.time);
            }
        });
    }
    //执行修改用户操作
    function updateAppoint() {

        //1.获得用户在页面上输入的用户名、密码，并判断是否为空。
        // 如果为空，则弹出提示框提醒用户输入。
        var time = $("#edit_time").val();
        if (time==null || time==""){
            alert("必须填写时间");
            return false;
        }
// 2.创建一个javascript中的用户对象，并将页面表单中的各个字段赋值给这个对象的属性。
        var reservation = new Object();
        // 3.将form表单中的输入控件的值，包括：用户id、用户名、密码、性别、邮箱、
        // 电话号码、自我介绍、用户角色，赋值到用户对象的属性上 。
        reservation.time = $("#edit_time").val();
// 4. 调用$.ajax()方法，向服务器发送异步http请求
        $.ajax({
            //1) 指定待发送http请求的URL地址。
            url: "${pageContext.request.contextPath}/updateTime.action",
            //2) 设置http请求的类型，为POST。
            type: "post",
            //3) 指定要发送到服务器的数据的数据类型，支持复杂的包含中文的JSON数据。
            contentType: "application/json;charset=UTF-8",
            //4) 设置要发送到服务器的数据。本例中是将一个javascript中的user对象，
            // 转换成JSON字符串，然后发送到服务器。
            data: JSON.stringify(reservation),
            //5) 发送http请求，服务器成功响应后，在客户端将要调用的回调方法。
            success: function(data) {
                //本例中，服务器端返回的不是JSON数据，就是一个普通数据。
                if(data =="SUCCESS"){
                    alert("成功修改预约信息。");
                    window.location.reload();//重新加载页面
                }else{
                    alert(data);
                    window.location.reload();//重新加载页面
                }
            }
        });
    }

    // 根据用户id，删除一个用户记录。
    function deleteAppoint(id) {
        //先弹出一个确认框，询问用户是否要删除。
        if(confirm('确实要删除该预约吗?')) {
            //用户点击确认框后，再调用$.post()方法，向服务器发送(基于ajax的)异步http请求。
            $.post(
                "${pageContext.request.contextPath}/deleteTime.action",
                {"id":id},
                function(data){
                    if(data =="SUCCESS"){
                        alert("成功删除一个预约。");
                        window.location.reload();
                    }else{
                        alert(data);
                        window.location.reload();
                    }
                }
            );
        }
    }

</script>
</html>
